<template>
	<div class="percent">
		<!-- <el-page-header class="back" @back="goBack" content="首页"></el-page-header> -->
		<el-row :gutter="20">
			<el-col :span="12">
				<div class="grid-content bg-purple">
					<div class="percent-title">
						<h2>应聘进度</h2>
					</div>
					<div class="percent-body">
						<div class="percent-text">
							<el-card>
								<div class="percent-text-detials">
									<div>
										<h4>投递时间: {{upTime}}</h4>
									</div>
									<div class="percent-text-detials-to">
										<h4>投递部门: {{upOffer}}</h4>
									</div>
								</div>
								<div class="percent-text-detials-help">
									当前状态：简历投递成功，请保持联系方式畅通
									已收到你的简历，请及时关注进展通知
								</div>
							</el-card>
						</div>
						<div class="percent-phrase">
							<el-steps space="20%" align-center="true" :active="active" finish-status="success">
								<el-step v-for="(item,index) in typeStatusArr" :title="item" :key="index"></el-step>
							</el-steps>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="10" :offset="1">
				<el-button type="text" class="exc-btn" @click="dialogVisible = true">修改</el-button>
				<el-dialog title="更改信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
					<el-form :model="curPerson" :rules="rules" ref="curPerson" label-width="100px"
						class="demo-ruleForm">
						<el-form-item label="用户名称" required prop="name">
							<el-input style="width: 220px;" clearable v-model="curPerson.name"></el-input>
						</el-form-item>
						<el-form-item label="宗教信仰" required prop="like">
							<el-select v-model="curPerson.like" placeholder="请选择宗教信仰">
								<el-option label="白族" value="shanghai"></el-option>
								<el-option label="黎族" value="beijing"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="性别" required prop="sex">
							<el-radio-group v-model="curPerson.sex">
								<el-radio label="男"></el-radio>
								<el-radio label="女"></el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="年龄" prop="age" required>
							<el-input-number min="1" max="100" v-model="curPerson.age"></el-input-number>
						</el-form-item>
						<el-form-item label="手机号" prop="phone" required>
							<el-input style="width: 220px;" clearable v-model="curPerson.phone"></el-input>
						</el-form-item>
						<el-form-item label="居住地" prop="home" required>
							<el-select v-model="curPerson.home" placeholder="居住地">
								<el-option label="上海" value="shanghai"></el-option>
								<el-option label="北京" value="beijing"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="详细地址" required prop="detials">
							<el-input style="width: 300px;" type="textarea" v-model="curPerson.detials"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm(curPerson)">保存</el-button>
							<el-button @click="resetForm('curPerson')">重置</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
				<div class="grid-content bg-purple">
					<el-card>
						<el-descriptions title="用户信息">
							<el-descriptions-item label="用户名">{{curPerson.name}}</el-descriptions-item>
							<el-descriptions-item label="宗教信仰">{{curPerson.like}}</el-descriptions-item>
							<el-descriptions-item label="手机号">{{curPerson.phone}}</el-descriptions-item>
							<el-descriptions-item label="年龄">{{curPerson.age}}</el-descriptions-item>
							<el-descriptions-item label="性别">{{curPerson.sex}}</el-descriptions-item>
							<el-descriptions-item label="居住地">{{curPerson.home}}</el-descriptions-item>
							<el-descriptions-item label="备注">
								<el-tag size="small">{{typeStatusArr[active]}} 阶段</el-tag>
							</el-descriptions-item>
							<el-descriptions-item label="联系地址">{{curPerson.detials}}</el-descriptions-item>
						</el-descriptions>
					</el-card>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: sessionStorage.getItem("active"),
				clickDis: false,
				dialogVisible: false,
				upTime: sessionStorage.getItem("date"),
				upOffer: sessionStorage.getItem("deptName"),
				typeStatusArr: [
					'笔试/测评',
					'技术一面',
					'技术二面',
					'hr面试',
					'offer'
				],
				curPerson: {
					id: '1',
					name: "王五",
					age: 15,
					like: "汉族",
					sex: "女",
					phone: "13619126222",
					home: "池州",
					detials: "江苏省苏州市吴中区吴中大道 1188 号"
				},
				rules: {
					name: [{
							required: true,
							message: '请输入您的昵称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 8,
							message: '长度在 1 到 8 个字符',
							trigger: 'blur'
						}
					],
					age: [{
						required: true,
						message: '请输入年龄',
						trigger: 'change'
					}],
					like: [{
						type: 'date',
						required: true,
						message: '请选择宗教信仰',
						trigger: 'change'
					}],
					phone: [{
							min: 11,
							max: 11,
							required: true,
							message: '请输入正确的手机号',
							trigger: 'change',
							validator: function(rule, value, callback) {
								if (/^1[34578]\d{9}$/.test(value) == false) {
									callback(new Error("请输入正确的手机号"));
								} else {
									callback();
								}
							},
						},
						{
							validator: function(rule, value, callback) {
								if (/^1[34578]\d{9}$/.test(value) == false) {
									callback(new Error("请输入正确的手机号"));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					home: [{
						required: true,
						message: '请选择居住地',
						trigger: 'change'
					}],
					detials: [{
						required: true,
						message: '请填写详细地址',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？').then(() => {
					done();
				})
			},
			submitForm(formName) {
				this.dialogVisible = false
				this.$message({
					message: "修改成功!",
					type: "success"
				})
				this.$http.post("/", formName).then((res) => {
					console.log(res)
					this.curPerson = res.data
					this.dialogVisible = false
					this.$message({
						message: "修改成功!",
						type: "success"
					})
				})
			},
			resetForm(curPerson) {
				this.$refs[curPerson].resetFields();
			},
			getUserInfo() {
				const user = sessionStorage.getItem("");
				this.curPerson = user;
			},
			getUserStatus() {
				this.$http.get("/user/updatestatus").then((res) => {
					
					if (res.data.status != -1) {
						window.sessionStorage.setItem("active", res.data.userStatus);
						window.sessionStorage.setItem("deptName", res.data.deptName);
						window.sessionStorage.setItem("date", res.data.date);
					}
					/* this.active = res.data.userStatus
					this.typeStatusArr = ["流程终止"] */
				})
			}
		},
		created() {
			this.getUserStatus()
			let id = sessionStorage.getItem("").id
			id = null
			alert(id)
			if(id == null || id == "" || id == undefined){
				this.$router.push("/login")
			}
			
			this.getUserInfo()	
		}
	}
</script>

<style>
	.back {
		margin-left: 40px;
	}

	.percent {
		margin-left: 40px;
	}


	.percent-title {
		margin-left: -530px;
	}

	.percent-body {

		width: 100%;
		padding: 20px;
	}

	.percent-text-detials {
		display: flex;
	}
	

	.percent-text-detials-to {
		margin-left: 200px;
	}

	.percent-text-detials-help{
		text-align: left;
	}

	.percent-phrase {
		width: 100%;
		margin-top: 40px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #ffffff;
	}

	.bg-purple {
		background: #ffffff;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		margin-top: 20px;
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.exc-btn {
		margin-top: 30px;
		margin-left: 460px;
	}
</style>
